<template>
	<!--TODO： 我的孩子 暂时不用到 -->
	<view class="my-child">
		<block v-for='(item,index) in childList' :key='index'>
			<view class="mc-content_list">
				<!-- 头像 -->
				<view class="my-content_list-avatar">
					<image src="../../static/image/icon.png" mode="" 
					style="width: 80upx;height: 80upx;position: relative;top: 14upx;"></image>
				</view>
				<!-- 名称 -->
				<view class="my-content_list-name">
					<text>{{item.name}}</text>
					<view>{{item.class}}</view>
				</view>
				<!-- audio -->
				<view class="my-content_list-radio">
					<radio-group @change="radioChange(index)">
						<label>
							<!-- 获取当前点击的value  可在radioChange函数中拿到 -->
							<view>
								<radio :value="item.value" :checked="index === current_index" color='orange' />
							</view>
						</label>
					</radio-group>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				childList: [{
						avatar: '../../../',
						name: '小明',
						class: '珠海市一中某某某某'
					},
					{
						avatar: '../../../',
						name: '小明2',
						class: '珠海市一中某某某某2'
					},
					{
						avatar: '../../../',
						name: '小明3',
						class: '珠海市一中某某某某3'
					},
				],
				current_index: 0,
			}
		},
		methods: {
			radioChange(index) {
				console.log(index);
				this.current_index = index
			}
		}

	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}
	.my-child {
		padding: 30upx;
		.mc-content_list {
			display: flex;
			position: relative;
			margin: 30upx 0;
			border-radius: 30upx;
			padding: 24upx 0;
			background: #fff;

			// audio
			.my-content_list-radio {
				position: absolute;
				right: 0;
				line-height: 30upx;
			}

			// 学生名称 和 地址
			.my-content_list-name {
				margin-left: 32upx;

				view {
					color: #666666;
					font-size: 28upx;
				}

				text {
					color: #333333;
					font-size: 34upx;

				}
			}
		}
	}
</style>
